<template>
	<el-container>
		<el-header class='x-header'>
			<b class="title">{{ page_info.title }}</b>
			<el-button size="mini" type="success" icon="el-icon-edit" @click="funcEdit('')">
				添加
			</el-button>
			<el-button size="mini" type="danger" icon="el-icon-delete" @click="g_page.funcDel()">删除</el-button>
			<el-button size="mini" icon="el-icon-refresh" @click="g_page.funcReload()">刷新</el-button>
		</el-header>
		<el-main class='x-main'>
			<el-form :inline="true" :model="form_q" size="mini">
				<el-form-item label="ID">
					<el-input v-model="form_q.compKw" placeholder="卡号"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="form_q.compName" placeholder="名称"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select filterable clearable v-model="form_q.compAppType" placeholder="请选择">
						<el-option v-for="(item,index) in page_info.list_app_type"
								   :label="item" :key="`${index}`" :value="`${index}`">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="g_page.funcSearch">搜索</el-button>
				</el-form-item>
			</el-form>
			<div class="table-wrap">
				<el-table stripe ref="multipleTable" tooltip-effect="dark"
						  @selection-change="g_page.funcTableSelectionChange"
						  :data="list_data">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="ID">
						<template slot-scope="data">
							<div v-html="data.row.id"></div>
						</template>
					</el-table-column>
					<el-table-column label="名称">
						<template slot-scope="data">
							<div v-html="data.row.coupon_name"></div>
						</template>
					</el-table-column>
					<el-table-column label="类型">
						<template slot-scope="data">
							<div v-html="data.row.type_app"></div>
						</template>
					</el-table-column>
					<el-table-column label="抵扣">
						<template slot-scope="data">
							<div v-if="data.row.coupon_use_price_max>0">
								满{{ data.row.coupon_use_price_max }}元，抵扣<b style="color:blue;">{{data.row.coupon_down_price
								}}</b>元
							</div>
							<div v-if="data.row.coupon_use_price_max==0">无门槛，抵扣<b style="color:blue;">{{data.row.coupon_down_price
								}}</b>元
							</div>
						</template>
					</el-table-column>
					<el-table-column label="余量/总量">
						<template slot-scope="data">
							<div>
								{{ data.row.stock_count_left }} /
								{{ data.row.stock_count_left + data.row.stock_count_use }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="领取日期">
						<template slot-scope="data">
							<div v-html="data.row.coupon_get_date_begin"></div>
							<div v-html="data.row.coupon_get_date_end"></div>
							<div style="color: red;" v-if="data.row.is_expire">已过期</div>
						</template>
					</el-table-column>
					<el-table-column label="有效期">
						<template slot-scope="data">
							<div v-if="data.row.coupon_vaild_date_type==0">
								<div v-html="data.row.coupon_vaild_date_begin"></div>
								<div v-html="data.row.coupon_vaild_date_end"></div>
							</div>
							<div v-else>
								领取后{{ data.row.coupon_vaild_date_after_h }}小时有效
							</div>
						</template>
					</el-table-column>
					<el-table-column label="排序">
						<template slot-scope="data">
							<div>{{data.row.coupon_order}}</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="data">
							<el-button type="text" size="mini" @click="funcEdit(data.row.id)">
								编辑
							</el-button>
							<el-button type="text" v-if="data.row.coupon_type_app==0" size="mini" @click="g_page.funcRedirectEdit(`app_car__coupon_join__spu?pid=${data.row.id}`)">
								限定车型
							</el-button>
							<el-button type="text" v-if="data.row.coupon_type_app==1" size="mini" @click="g_page.funcRedirectEdit(`app_car__coupon_join__plan?pid=${data.row.id}`)">
								限定套餐
							</el-button>
							<el-button type="text" size="mini" @click="g_page.funcRedirectEdit(`app_car__coupon_code__list?pid=${data.row.id}`)">
								兑换码
							</el-button>
							<el-button type="text" size="mini" @click="g_page.funcRedirectEdit(`app_car__coupon__record__list?pid=${data.row.id}`)">
								领取列表
							</el-button>
							<el-button type="text" size="mini" @click="funcGetQr(data.row)">
								领取二维码
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<a target="_blank"></a>
			</div>
		</el-main>
		<!---->
		<!---->
		<!-- 分页 -->
		<el-footer v-if="page_show" class="x-page">
			<el-pagination class="paging" background layout="total, sizes, prev, pager, next, jumper"
						   @current-change="g_page.funcPageChange" :page-sizes="[page_size]"
						   :current-page="page_index" :page-size="page_size" :total="page_total">
			</el-pagination>
		</el-footer>
		<!---->
		<!---->
		<!-- 编辑控件 -->
		<CouponSetEdit ref="item_edit" :app_id="form_q.app_id" :funcSaveAfter="funcEditItem_success"></CouponSetEdit>
		<!---->
		<!---->
		<!-- 弹框 -->
		<el-dialog :title="form.app_idx+'配置'" :visible.sync="form_dialog_visible" width="70%">
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-form-item label="入口链接" v-if="!g_page.funcIsAdminAdd()">
					<el-input :disabled="true" v-model="form.oauth_url"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="g_page.funcBack" size="mini">取消</el-button>
				<el-button type="success" @click="g_page.funcSave" size="mini">保存</el-button>
			</div>
		</el-dialog>
		<!---->
		<!---->
		<!---->
	</el-container>
</template>


<script>
	import CouponSetEdit from '@/views/app_wxapp/app_car/components/CouponSetEdit'

	export default {
		components: {
			CouponSetEdit
		},
		data() {
			let page_data = { super_uid: '' }
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			//
			this.g_page.funcSetVue(this)
			// 应用ID
			this.g_page.funcSetApiUrlList('/xadmin/app_car/app_car__coupon__list')
			this.g_page.funcSetApiUrlDel('/xadmin/app_car/app_car__coupon__list/del')
			//页码
			this.g_page.funcSetPageSize(20)
			//搜索
			this.form_q = {
				'compKw': ''
			}
			this.g_page.funcGetList()
			//
			this.form_rules = {
				acc_uidX: [
					{
						required: true,
						message: '必填',
						trigger: 'blur'
					}
				]
			}
			//
		},
		methods: {
			////////////////////
			////////////////////////////////////
			//优惠券领取
			funcGetQr(row) {
				let path = `pages/app_car/coupon_detail/coupon_detail?coupon_id=${row.id}`
				let url = `${BASE_API}/app/z_common/app_api/wxapp_qr_long?path=${encodeURIComponent(path)}&x=${row.coupon_x_id}`
				let content = `<br/><a href="${url}" target="_blank"><img src="${url}" style="width: 100%;" /></a>`
				this.$confirm(content, '优惠券领取', {
					dangerouslyUseHTMLString: true,
					showCancelButton: false,
					showConfirmButton: false,
					showClose: true
				}).catch(() => {

				})
			},
			funcEdit(id) {
				this.$refs['item_edit'].funcEdit(id)
			},
			funcEditItem_success(e) {
				this.g_page.funcGetList()
			}
		}
	}
</script>
